<template>
  <div class="bw-create-form-header">
    <div class="title">组件设计器</div>

    <div class="toolbar" ref="toolbar">
      <a-dropdown placement="top">
        <Icon :icon="curDesignFrontInfo.icon" class="toolbar-icon" />

        <template #overlay>
          <a-menu @click="onChangeFront">
            <a-menu-item :key="BwFrontTypeEnum.pc">
              <Icon icon="ant-design:laptop-outlined" class="toolbar-icon" />
              <a href="javascript:;">PC端</a>
            </a-menu-item>

            <a-menu-item :key="BwFrontTypeEnum.ios">
              <Icon icon="ant-design:apple-outlined" class="toolbar-icon" />
              <a href="javascript:;">苹果</a>
            </a-menu-item>

            <a-menu-item :key="BwFrontTypeEnum.android">
              <Icon icon="ant-design:android-outlined" class="toolbar-icon" />
              <a href="javascript:;">安卓</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

      <a-dropdown>
        <Icon
          icon="ant-design:copy-outlined"
          class="toolbar-icon"
          @click="onCopy(CopyPasteTypeEnum.page)"
        />
        <template #overlay>
          <a-menu>
            <a-menu-item
              :key="CopyPasteTypeEnum.page"
              @click="onCopy(CopyPasteTypeEnum.page)"
            >
              复制页面
            </a-menu-item>
            <a-menu-item
              :key="CopyPasteTypeEnum.com"
              @click="onCopy(CopyPasteTypeEnum.com)"
            >
              复制当前组件
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>

      <a-tooltip placement="bottom" title="粘贴">
        <Icon
          icon="ant-design:diff-outlined"
          class="toolbar-icon"
          @click="onShowPaste"
        />
      </a-tooltip>

      <a-divider type="vertical" />
      <a-button type="link" size="small" @click="onClick"> 组件设置 </a-button>
    </div>

    <a-modal
      v-model:open="isShowPaste"
      title="请把复制内容粘贴到下面的输入框"
      :footer="null"
    >
      <div class="paste-body">
        <div class="select-slot" v-if="curComSlotList.length > 1">
          <div class="select-slot-label">选择要粘贴到哪个插槽：</div>
          <div class="select-slot-value">
            <a-select
              v-model:value="curComSlot"
              :options="curComSlotList"
              :style="{
                width: '100%',
              }"
            />
          </div>
        </div>

        <a-textarea
          v-model:value="pasteContent"
          :autoSize="{ minRows: 2, maxRows: 6 }"
          @change="onPaste"
        />
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { useCreateFormHeader } from './util'
import { CopyPasteTypeEnum } from './enum'

const emit = defineEmits(['front', 'version', 'preview'])
const {
  BwFrontTypeEnum,
  curDesignFrontInfo,
  isShowPaste,
  pasteContent,
  curComSlotList,
  curComSlot,

  onCopy,
  onPaste,
  onClick,
  onChangeFront,
  onShowPaste,
} = useCreateFormHeader(emit)
</script>

<style lang="less" scoped>
.bw-create-form-header {
  width: 100%;
  height: 35px;
  display: flex;
  padding: 0 12px;
  align-items: center;
  background: #fff;
  width: calc(100% - 24px);
  justify-content: space-between;
  border-bottom: 1px solid #e8e8e8;

  .title {
    font-size: 14px;
    flex-shrink: 0;
    font-weight: 600;
  }

  .toolbar {
    font-size: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .toolbar-icon {
      cursor: pointer;
      margin-left: 8px;
      display: inline-block;
    }

    .select-front {
      color: #0960bd;
    }

    .bnt {
      margin: 0 8px;
    }
  }
}
.paste-body {
  .select-slot {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    .select-slot-value {
      flex: 1;
    }
  }
}
</style>
